<script>
import {Create, edmitReservation, Student, studentClass, Teacher} from "@/api/APiH/httm";
import item from "@/layout/components/Sidebar/Item.vue";
import {reset} from "chalk";
import moment from 'moment';

export default ({
  name: "index",
  data() {
    return {
      // 查看
      classList: [],
      teacherList: [],
      studentList: [],
      chakanList: [],
      visibleCancel: '',
      visibleLine: '', //隐藏
      visibleSubmit: '',
      newList: [],
      studentId: '',
      // 总数
      text: '',
      options: {},
      option: {},
      total: '',
      totalDuration: '',
      psyStudent: {
        name: ''
      },
      dialogVisible6: false,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      centerDialogVisible: false,
      // 获取的用户列表
      tableData: [{
        createTime: '',
        mode: '',
        duration: '',
        appointmentStatus: ``,
        name: '',
        userId: '',
        order: '',
        id: '',
        content: '',
        visibleLine: '', //隐藏
        visibleSubmit: '',
        psyStudent: {
          id: ''
        },
      },
      ],
      formInline: {
        time: '',
        user: '',
        nickName: '',
        region: '',
        userNum: '',
        appointmentStatus: '',
        consultant: '',
        psyClass: '',
        student: {
          class: '',
          name: ''
        },
        teacher: {
          name: ''
        }
      },
      forIn: {
        region1: ''
      },
      value1: '',
      value2: '',
      query: {
        pageNum: 1,
        pageSize: 10,
        name: ''
      },
      integer: {
        pageNum: 1,
        pageSize: 10,
        code: '',
        studentId: '',
        durationHour: '',
        data: {
          studentId: '',
          id: '',
          content: '',
          visibleLine: '', //隐藏
          visibleSubmit: '',
          scheduling: {
            id: '',
            create_by: '',
            create_time: '',
            update_by: '',
            update_time: '',
            date: '',
            status: '',
            start_time: '',
            end_time: '',
            remark: '',
          },
          teacher: {
            id: '',
            name: '',
            avatar: '',
            gender: '',
            profession: '',
            infos: '',
            location: '',
          },
          student: {
            name: '',
            stuNum: '',
          },
          class: {
            name: '',
          },
          mode: '',
          dateNow: '',
        },
        msg: ''
      },
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 10,
      },
      teacherName: '',
      row: {},
      //   查看信息
      information: {
        name: '',
        className: '',
        StudentID: '',
        Consultants: '',
        ConsultWays: '',
        AttendanceStatus: '',
        ConsultationHours: '',
        ProblemDescription: '',
        StudentFeedback: '',
      },
      inputClassName: '',
    }
  },
  // 数据接口
  created() {
    // 渲染表单列表
    this.getStudentList()
    Teacher().then((res) => {
      this.options = res.rows
    })
    studentClass().then((res) => {
      this.option = res.rows
    })


  },
  methods: {
    weidaoBtn(row) {
      // console.log(row)
      this.row = row
      this.newList = row
      this.dialogVisible1 = true
    },
    changeValue(row) {
      // console.log(row)
      this.durationHour = row
      // psyStudent.remainingForbiddenHour=row
    },
    // 禁用按钮
    disableBtn(row) {
      this.dialogVisible = false
      this.studentId = row.psyStudent.id
      // console.log(this.studentId)
      Create({studentId: this.studentId, durationHour: this.durationHour}).then((res) => {
        // console.log(res)
        // 禁用判断
        // res.rows.forEach((item) => {
        // 该学生已注销
        if (item.studentId === row.psyStudent.id) {
          this.durationHour = psyStudent.remainingForbiddenHour
        }
        console.log(row)
        this.reSetting()
        // })
      })
    },
    // 数据接口的方法
    getStudentList() {
      Student(this.query).then((res) => {
        this.tableData = []
        res.rows.forEach((item) => {
          // 该学生已注销
          if (item.psyClass === null) {
            item = {
              content: '该学生已注销',
            }
          }
          this.tableData.push(item)
        })
        // 统计时长
        this.total = res.total
        this.totalDuration = res.data.totalDuration
      })
    },

// 查看
    handleClick(item) {
      this.chakanList = item
      // console.log(this.chakanList)
      this.studentList = this.chakanList.psyStudent
      this.teacherList = this.chakanList.psyTeacher
      this.classList = this.chakanList.psyClass
      if (item.psyTeacher === null) {
        this.dialogTableVisible = false
        this.$message({
          message: '此次预约无老师信息',
          type: 'success'
        });
      } else {
        this.dialogVisible6 = true
        Student().then((res) => {
          this.tableData = []
          //   有老师查看的弹框信息
          this.content = res.rows.content
          res.rows.forEach((item) => {
            // 该学生已注销
            if (item.psyClass === null) {
              item = {
                content: '该学生已注销',
              }
            }
            this.tableData.push(item)
          })
          // 统计时长
          this.total = res.total
          this.totalDuration = res.data.totalDuration
        })
      }
    }
    ,
// 搜索
    searchClass(val) {
      console.log(val)
      this.tableData.forEach(item => {
        if (item.content!='该学生已注销') {
          // console.log(11111)
          if (item.psyClass != null) {
            if (val === item.psyClass.id) {
              console.log(111)
              console.log(item.psyClass.name)
              this.inputClassName = item.psyClass.name
            }
          }

        }
      })

      // 班级名搜索
      Student({
        pageNum:1,
        pageSize:10,
        psyClass:this.inputClassName

      }).then(res => {
        console.log(res)
      })

    },
    onSubmit() {
      // 姓名 班级 学号 开始时间 结束时间 赴约状态 咨询师
      this.query.stuName = this.formInline.name
      this.query.psyClass = this.formInline.class
      this.query.stuNum = this.formInline.userNum
      this.query.startTime = this.formInline.time
      this.query.statusType = this.formInline.appointmentStatus
      this.query.teacherName = this.formInline.consultant
      Teacher().then((res) => {
        this.options = res.rows
      })
      studentClass().then((res) => {
        this.option = res.rows
        console.log(this.option)
      })

      this.tableData.forEach(item => {
        if (item.content === 'teacherName') {
          if (item.psyTeacher.id === this.teacherName) {
            this.teacherName = item.psyTeacher.name
          }
        }


      })


      Student(this.query, {
        teacherName: this.teacherName
      }).then((res) => {
        this.tableData = []
        res.rows.forEach((item) => {
          // 该学生已注销
          if (item.psyClass === null) {
            // item.content = '该学生已注销'
            item = {
              content: '该学生已注销',
            }
          }
          this.tableData.push(item)
        })
        // 统计时长
        this.total = res.total
        this.totalDuration = res.data.totalDuration
      })


    },
//获取表格序号
    getIndex(index) {
      return (this.query.pageNum - 1) * this.query.pageSize + index + 1
    }
    ,
// 分页器
    handleSizeChange(val) {
      this.query.pageNum = 1
      this.query.pageSize = val
    }
    ,
    handleCurrentChange(val) {
      this.query.pageNum = val
      this.getStudentList()
    }
    ,
    // 预约
    toggle() {
      this.dateNow = moment(new Date()).format("YYYY-MM-DD")
      if (this.row.psyScheduling.date === this.dateNow) {
        if (this.newList.status === '0') {
          this.newList.status = '1'
          this.dialogVisible1 = false
        }
        edmitReservation(
          {
            id: this.row.id,
            arrive: '1'
          }
        ).then(res => {
          console.log(res)
        })
      } else {
        this.dialogVisible1 = false
        this.$message({
          message: '只能在预约当天修改已到状态',
          type: 'error'
        });
        this.reSetting()
      }
    },
// 重置

    reSetting() {
      this.formInline.name = null
      this.formInline.class = null
      this.formInline.userNum = null
      this.formInline.time = null
      this.formInline.time = null
      this.formInline.appointmentStatus = null
      this.formInline.consultant = null
      Student().then((res) => {
        this.tableData = []
        // console.log(res)
        res.rows.forEach((item) => {
          // 该学生已注销
          if (item.psyClass === null) {
            // item.content = '该学生已注销'
            item = {
              content: '该学生已注销',
            }
            // this.visibleLine='none'
            // this.visibleSubmit = 'none'
            // this.visibleLine='none'
            // this.visibleSubmit='none'
          }
          this.tableData.push(item)
        })
        // console.log(this.tableData)
        // 统计时长
        this.total = res.total
        // console.log(this.total)
        // console.log(res.data.totalDuration)
        this.totalDuration = res.data.totalDuration
        // console.log(this.totalDuration)
      })
    }
    ,
  },
})
</script>
<template>
  <div id="box">
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="30%"
      :append-to-body="true"
    >
      <span>确定修改状态为已到?</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="toggle">确 定</el-button>
  </span>
    </el-dialog>
    <!--    头部表单区-->
    <div id="formtop">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <div style="display: flex;justify-content: space-between">
          <div>
            <el-form-item label="学生姓名">
              <el-input id="student" placeholder="请输入学生姓名" v-model="formInline.name"
              ></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="班级">
              <el-select v-model="formInline.class" placeholder="请选择班级"  @change="searchClass(formInline.class)">
                <el-option
                  v-for="item in option"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="学号" class="el-input--small">
              <el-input v-model="formInline.userNum" placeholder="请输入学号"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="咨询时间" class="el-input--small">
              <div class="block">
                <el-date-picker
                  v-model="formInline.time"
                  type="datetimerange"
                  align="right"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['12:00:00', '08:00:00']"
                  class="el-date-editor">
                </el-date-picker>
              </div>
            </el-form-item>
          </div>
          <div>
            <el-form-item class="fuYue" label="赴约状态">
              <!--          v-if="scope.row.psyClass !=null"-->
              <el-select v-model="formInline.appointmentStatus" placeholder="全部" slot-scope="scope">
                <el-option label="已到" value="yidao"></el-option>
                <el-option label="未到" value="veidao"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>

        <!-- 调整样式-->
        <div style="display: flex;justify-content: left ;">
          <div>
            <el-form-item label="咨询师 ">
              <el-select v-model="formInline.consultant" placeholder="全部"
                         @change="teacherNameMethods(formInline.consultant)">
                <!--                teacherNameMethods(formInline.consultant)-->
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
                <!--            <el-option label="李老师" value="lilaoshi"></el-option>-->
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item>
              <el-button class="ssCx" type="primary" @click="onSubmit">
                <i class="el-icon-search"></i>
                搜索
              </el-button>
              <el-button @click="reSetting">
                <i class="el-icon-refresh"></i>
                重置
              </el-button>
            </el-form-item>
          </div>
        </div>


      </el-form>
    </div>
    <!--咨询时长、次数-->
    <div>
      <p style="font-size: 14px">统计：&nbsp;&nbsp;&nbsp;咨询时长：{{ Math.trunc((this.totalDuration) / 60) }}小时
        {{ (this.totalDuration) % 60 }} 分钟&nbsp;&nbsp;&nbsp;咨询次数：{{ this.total }}</p>
    </div>
    <!--  用户表格信息-->
    <div id="mainform">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          fixed
          type="index"
          prop="order"
          label="序号"
          width="70">
          <template #default="scope">
            <span v-text="getIndex(scope.$index)"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="psyStudent.name"
          label="学生姓名"
          width="80">
        </el-table-column>
        <el-table-column
          prop="psyClass.name"
          label="班级"
          width="100">
        </el-table-column>
        <el-table-column
          prop="psyStudent.stuNum"
          label="学号"
          width="70">
        </el-table-column>
        <el-table-column
          prop="psyStudent.phoneNumber"
          label="手机号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="psyClass.id"
          label="id"
          width="50">
        </el-table-column>
        <el-table-column
          prop="psyTeacher.name"
          label="咨询老师"
          width="80">
        </el-table-column>
        <el-table-column
          prop="content"
          label="问题描述"
          width="120">
        </el-table-column>
        <!--        [`我的名字是${name}，今年${age}岁。`]-->
        <!--        ,'psyScheduling.startTime'+'psyScheduling.endTime'-->
        <!--        prop="psyScheduling.date"-->
        <el-table-column
          prop="psyScheduling.date"
          label="咨询时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="mode"
          label="咨询方式"
          width="80">

        </el-table-column>
        <el-table-column
          prop="mode"
          label="咨询类型"
          width="80">
          <template slot-scope="scope">
            <p v-if="scope.row.psyClass !=null">个人预约</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="duration"
          label="咨询时长"
          width="80">
        </el-table-column>
        <el-table-column v-model="forIn.region1"
                         prop="psyStudent.remainingForbiddenHour"
                         label="禁用剩余时长"
                         width="80">
        </el-table-column>
        <el-table-column
          prop="status"
          label="赴约状态"
          width="80">
          <!--已注销-->
          <!--          <div v-if=""></div>-->
          <!-- 未注销-->
          <template slot-scope="scope" v-if="scope.row.psyClass !=null">
            <!--            dialogVisible1 = true-->
            <el-button type="danger" v-if="scope.row.arrive==='0'" @click="weidaoBtn(scope.row)"
                       :style="{ display: visibleLine }">未到
            </el-button>
            <el-button type="primary" disabled v-else @click="dialogVisible1(scope.row)"
                       :style="{ display: visibleSubmit }">
              已到
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="upTime"
          label="咨询状态"
          width="80">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="250">
          <template slot-scope="scope" v-if="scope.row.psyClass !=null">
            <el-button @click="centerDialogVisible = true" type="text" size="small" v-if="scope.row.arrive==='1'">
              <i class="el-icon-edit"></i>
              建议
            </el-button>
            <el-dialog
              title="填写建议"
              :visible.sync="centerDialogVisible"
              width="30%"
              :append-to-body="true"
            >
              <el-input id="Confine "
                        type="text"
                        placeholder="填写您的建议"
                        v-model="text"
                        maxlength="500"
                        show-word-limit
              >
              </el-input>
              <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible  = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible  = false">确 定</el-button>
  </span>
            </el-dialog>
            <el-button @click="handleClick(scope.row)" type="text" size="small">
              <i class="el-icon-edit"></i>
              查看
            </el-button>
            <el-dialog
              title="查看信息"
              :visible.sync="dialogVisible6"
              width="50%"
              :append-to-body="true"
            >


              <!--        查看信息区域        -->
              <span>
                 <el-descriptions class="margin-top" title="" :column="2" border>
    <el-descriptions-item>
      <template slot="label">
        姓名
      </template>
{{ studentList.name }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        班级
      </template>
{{ classList.name }}
    </el-descriptions-item>
     <br><el-descriptions-item>
     <template slot="label">
        学号
      </template>
{{ studentList.stuNum }}
    </el-descriptions-item>
    <br><el-descriptions-item>
      <template slot="label">
        咨询师
      </template>
{{ teacherList.name }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        咨询方式
      </template>
      {{ chakanList.mode }}
    </el-descriptions-item>

                    <el-descriptions-item>
      <br><template slot="label">
        赴约状态
      </template>
  {{ information.AttendanceStatus }}
    </el-descriptions-item>
                    <el-descriptions-item :column="1">
      <template slot="label">
        咨询时间
      </template>
                       {{ chakanList.createTime }}
    </el-descriptions-item>
                  <br> <span>
                      <el-descriptions-item :column="1">
     <template slot="label">
        问题描述
      </template>
{{ chakanList.content }}
    </el-descriptions-item>
                   </span>
                    <el-descriptions-item :column="1">
      <template slot="label">
        学生反馈
      </template>
  {{ information.StudentFeedback }}
    </el-descriptions-item>
                       <el-descriptions-item :column="1">
      <template slot="label">
        老师建议
      </template>
  {{ information.StudentFeedback }}
    </el-descriptions-item>
  </el-descriptions>

              </span>


              <span slot="footer" class="dialog-footer">
  </span>
            </el-dialog>
            <!--            d-->
            <el-button type="text" size="small" @click=" dialogVisible = true">
              <i class="el-icon-edit"></i>
              禁用
            </el-button>
            <el-dialog
              title="修改禁用状态"
              :visible.sync="dialogVisible"
              width="17%"
              :append-to-body="true"
            >
              <span>
          <el-select @change="changeValue" v-model="forIn.region1" placeholder="">
             <el-option label="不禁用" value="1"></el-option>
            <el-option label="一周" value="168"></el-option>
            <el-option label="二周" value="336"></el-option>
             <el-option label="三周" value="504"></el-option>
            <el-option label="四周" value="672"></el-option>
          </el-select>
</span>
              <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="disableBtn(scope.row)"> 确 定</el-button>
  </span>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    分页器-->
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        background
        :current-page="query.pageNum"
        :pageSize="query.pageSize"
        layout=" prev, pager, next"
        @size-change="handleSizeChange"
        :total="(this.total)/1">
      </el-pagination>
    </div>
  </div>
</template>
<style lang="scss">
.el-pagination {
  white-space: nowrap;
  padding: 15px 5px;
  color: #303133;
  font-weight: bold;
  float: right;
}

.el-form--inline .el-form-item {
  display: inline-block;
  margin-right: -18px;
  vertical-align: top;
}

.el-form-item.el-form-item--medium {
  display: flex;
  flex-direction: row;
}

.el-form-item__label {
  width: 80px;
}

.el-form-item__label {
  margin-left: 1px;
}

.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 95%;
}

.fuYue {
  margin-left: 65px;
}

#box {
  padding: 20px;
}

#mainform {
  margin-top: 30px;
}

.el-input--medium {
  font-size: 10px;
}

.el-date-editor {
  width: 300px;
}

.el-button--medium {
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 3px;
}

.el-dialog__header {
  padding: 20px;
  padding-bottom: 10px;
  background: #406ef2;
  border-radius: 10px 10px 0 0;
}

.el-dialog__title {
  line-height: 24px;
  font-size: 18px;
  color: white;
}

.el-dialog__headerbtn .el-dialog__close {
  color: white;
}

.dialog-box[data-v-23389618] .el-dialog {
  border-radius: 10px;
}

.el-dialog {
  -webkit-transform: none;
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgb(228 206 206 / 30%);
}

.ssCx {
  margin-left: 70px;
}

.el-dialog__footer {
  padding: 20px;
  padding-top: 10px;
  text-align: right;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
  word-break: break-word;
  background-color: #f8f8f9;
  color: #515a6e;
  height: 40px;
  font-size: 13px;
  text-align: center;
}

.el-table--border .el-table__cell {
  border-right: none;
}

.el-table .cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 23px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  word-break: keep-all;
  //word-wrap: break-word;
}

::v-deep #Confine {
  height: 300px !important;
}
</style>
